<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建节点</title>
</head>
<body>
    <div id="app">houdunren</div>

    <script>
    //创建节点
    //创建节点的就是构建出DOM对象,然后根据需要添加到其他的节点中
    //createTextNode
    //创建文本对象并添加到元素中
    
    //创建文本节点并且将其添加到元素中
    // let app = document.querySelector(`#app`);
    // let text = document.createTextNode('houdunren');
    // app.appendChild(text);


    //createElement
    //使用creaetElemnt方法可以标签节点对象,创建span标签新街店并添加到div#app
    // let app = document.querySelector(`#app`);
    // let span = document.createElement('span');
    // span.innerHTML = 'houdunren';
    // span.style.color = 'red';
    // app.appendChild(span);
    
    //使用promise结合节点操作来加载外部javascript文件
    function js(file){
        return new Promise((resolve,reject) => {
            let js = document.createElement('script');
            js.type = 'text/javascript';
            js.src = file;
            js.onload = resolve;
            js.onerror = reject;
            document.head.appendChild(js);
        });
    }

    js('11.js')
    .then(() => console.log('加载成功'))
    .catch((error) => console.log(`${error}加载失败`))
    ;


    //可以使用同样的逻辑来加载css文件
    function css(file){
        return new Promise((resolve,reject) => {
            let css = document.createElement('link');
            css.rel = 'stylesheet';
            css.href = file;
            css.onload = resolve;
            css.onerror = reject;
            document.head.appendChild(css);
        });
    }

    css('11.css').then(() => console.log('文件加载成功')).catch((error) => console.log('加载失败'));

    //使用colneNode和document.importNode用于节点复制
    //cloneNode是节点方法
    //cloneNode参数为true的时候递归复制子节点即深拷贝
    //importNode是document对象方法
    // let app = document.querySelector('#app');
    // let newApp = app.cloneNode(true);
    // console.log(newApp);
    // document.body.appendChild(newApp);


    //document.importNode方法是部分IE浏览器不支持的,也是复制节点的方法
    //document.importNode  第一个参数是需要复制的节点对象, 第二个参数为true的时候递归复制
    let app = document.querySelector(`#app`);
    let newApp = document.importNode(app,true);
    document.body.appendChild(newApp);

</script>
</body>
</html>